<template>
  <back-item :title="title"></back-item>
  <div class="animated fadeInLeft user-top" v-if="show">
    <!-- 充值记录 -->
    <div style="padding: 10px; background: #fff">
      <div
        v-if="dataList.length > 0"
        v-infinite-scroll="getDataList"
        infinite-scroll-distance="20px"
        :infinite-scroll-disabled="disabled"
        style="width: 100%"
      >
        <div v-if="mobile === 'false'">
          <!-- 移动端 -->
          <div v-for="item of dataList" :key="item.id">
            <video-history-h :data="item" @del="onDelete"></video-history-h>
          </div>
        </div>
        <div v-else>
          <!-- PC端 -->
          <!-- <div v-for="item of dataList" :key="item.id"></div> -->
          <el-timeline>
            <el-timeline-item
              v-for="item of dataList"
              :key="item.id"
              center
              :timestamp="tool.formatRelativeTime(item.createTime)"
              placement="top"
              color="#0071ff"
              :hollow="true"
            >
              <video-history :data="item.video" @del="onDelete"></video-history>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-if="loading" class="fcolor" style="text-align: center">
          <data-load-vue></data-load-vue>
        </div>
        <div
          v-if="noMore"
          class="fcolor"
          style="text-align: center; line-height: 80px"
        >
          No more
        </div>
      </div>
      <el-empty description="description" v-else />
    </div>
  </div>
  <page-loading-vue v-else></page-loading-vue>
</template>

<script setup>
import request from "@/assets/js/request";
import backItem from "@/components/other/back-item.vue";
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import tool from "@/assets/js/tool";
import dataLoadVue from "@/components/other/data-load.vue";
import pageLoadingVue from "@/components/other/page-loading.vue";
import videoHistory from "@/components/video/video-history-pc.vue";
import videoHistoryH from "@/components/video/video-history-h5.vue";

const title = ref("观看记录");
const page = ref({
  pageNum: 1,
  total: 0,
  pages: 0,
});
const mobile = localStorage.getItem("mobile");
const show = ref(false);
const dataList = ref([]);
const loading = ref(false);
const noMore = computed(() => dataList.value.length >= page.value.total);
const disabled = computed(() => loading.value || noMore.value);

const getDataList = () => {
  loading.value = true;
  request
    .get(`/client/video/watch/recording?pageNum=${page.value.pageNum}`)
    .then((res) => {
      if (res.code === 200) {
        dataList.value.push(...res.data.records);
        page.value.pageNum += 1;
        page.value.total = res.data.total;
        page.value.pages = res.data.pages;
        loading.value = false;
      } else {
        ElMessage.error(res.msg);
      }
      show.value = true;
    })
    .catch((err) => {
      ElMessage.error(err.message);
      show.value = true;
    });
};

const onDelete = (id) => {
  request
    .delete(`/client/video/watch/del?id=${id}`)
    .then((res) => {
      if (res.code === 200) {
        const targetIndex = dataList.value.findIndex((item) => item.id === id);
        if (targetIndex !== -1) {
          dataList.value.splice(targetIndex, 1);
        }
        ElMessage({
          message: "删除成功",
          grouping: true,
          type: "success",
        });
        getDataList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
onMounted(() => {
  getDataList();
  // show.value = true;
});
</script>

<style scoped lang="scss">
.item {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #eee solid;
  .left-item {
    & > div:nth-child(1) {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    & > div:nth-child(2) {
      font-size: 14px;
      color: #686868;
    }
  }

  .right-item {
    font-size: 18px;
    font-weight: 600;
    color: #ff5d1e;
  }
}
</style>
